<template>
  <view class="wrapper">
    <u-popup
      v-model="showPopup"
      mode="bottom"
      border-radius="20"
      :safe-area-inset-bottom="true"
      :closeable="true"
      :mask-custom-style="{ background: 'rgba(0, 0, 0, 0.7)' }"
    >
      <view class="popup-content">
        <view class="page-title">拣货单复核</view>
        <view class="tips">备注：缺货时与我电话联系</view>
        <scroll-view class="content-scroll" :scroll-y="true">
          <view class="list">
            <view class="item" v-for="(item, index) in list" :key="index">
              <view class="image-wrap">
                <image :src="item.photo"/>
              </view>
              <view class="goods-info">
                <view class="goods-name twoline-hide">{{ item.name }}</view>
                <view class="middle-wrap">
                  <view>
                    <view class="desc">编码：{{ item.skuCode }}</view>
                    <view class="desc">条码：{{ item.barcode }}</view>
                  </view>
                  <view class="status">
                    <u-tag :text="item.pickQuantity < item.quantity ? '缺货' : '已拣货'" :type="item.pickQuantity < item.quantity ? 'warning' : 'primary'" size="mini"/>
                  </view>
                </view>
                <view class="desc">
                  <text>购买{{ item.orderGoodsQuantity }}</text>
                  <text>应拣{{ item.quantity }}</text>
                  <text>实拣{{ item.pickQuantity }}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="footer-fixed">
          <view class="btn-wrapper">
            <u-button :custom-style="customStyle" @click="partReturn">部分退货</u-button>
            <u-button :custom-style="customStyle" type="primary" @click="confirm">复核完成</u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>

export default {
  name: "index",
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      showPopup: false,
      customStyle: {
        width: '330rpx'
      }
    }
  },
  methods: {
    show() {
      this.showPopup = true
    },
    hide() {
      this.showPopup = false
    },
    partReturn() {
      this.hide()
      this.$emit('partReturn')
    },
    confirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper {

  .popup-content {
    padding: 24rpx 32rpx;

    .page-title {
      text-align: center;
      margin-bottom: 40rpx;
      font-size: 36rpx;
      font-weight: bold;
    }

    .tips {
      background: #FFF7E8;
      color: #FF7D00;
      font-size: 24rpx;
      padding: 16rpx;
      border-radius: 8rpx;
    }

    .content-scroll {
      min-height: 30vh;
      max-height: 55vh;

      .list {
        margin-top: 24rpx;
        // 设置ios刘海屏底部横线安全区域
        padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
        padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);

        .item {
          display: flex;
          align-items: center;
          margin-bottom: 40rpx;

          .image-wrap {
            width: 144rpx;
            height: 144rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .goods-info {
            flex: 1;
            margin-left: 16rpx;

            .goods-name {
              font-size: 28rpx;
              margin-bottom: 10rpx;
            }

            .middle-wrap {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .status {
                width: 94rpx;
                text-align: right;
              }
            }

            .desc {
              font-size: 24rpx;
              line-height: 42rpx;
              color: #666666;

              text {
                margin-right: 16rpx;
              }
            }
          }
        }
      }
    }
  }

  // 底部操作栏
  .footer-fixed {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    right: 0;
    z-index: 11;
    background: #fff;
    border-top: 2rpx solid #eee;
    // 设置ios刘海屏底部横线安全区域
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .btn-wrapper {
      padding: 16rpx 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>
